<template>
  <div class="edc_export_wrapper">
    <div class="main_part">
      <!-- 头部文字 -->
      <div class="header_text">
        <i class="el-icon-data-line"></i>
        <span>{{ pageTitle }}</span>
      </div>
      <!-- 表格 -->
      <div class="table_part">
        <el-table :data="tableData" stripe :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }">
          <el-table-column label="#" type="index" width="50" align="center"> </el-table-column>
          <el-table-column label="名称" prop="name">
            <template v-slot="{ row }">
              <span @click="handleDownloadFile(row)" style="cursor: pointer; color: #007bff">{{ row.name }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- CRF导出 -->
    <CRFExport :exportVis="exportVis" @handleCloseExport="handleCloseExport" @handleTimingExport="handleTimingExport"
               :formItemControl="formItemControl" :exportDiaTitle="exportDiaTitle" :exportData="exportData"></CRFExport>
    <!-- 定时报告 -->
    <TimingReport :timingVis="timingVis" @handleCloseTiming="handleCloseTiming"></TimingReport>
  </div>
</template>

<script>
import CRFExport from './components/CRFExport.vue'
import TimingReport from './components/TimingReport.vue'
export default {
  components: {
    CRFExport,
    TimingReport,
  },
  props: {
    pageTitle: {
      type: String,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pageParams: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      exportVis: false,
      timingVis: false,
      formItemControl: [],
      exportDiaTitle: '',
      exportData: {}
    }
  },
  methods: {
    // 导出
    handleDownloadFile(row) {
      this.exportData = row
      this.formItemControl = row.formItemControl
      this.exportDiaTitle = row.name

      this.exportVis = true
    },
    // 关闭导出弹窗
    handleCloseExport() {
      this.exportVis = false
    },
    // 点击定时导出
    handleTimingExport() {
      this.exportVis = false
      this.timingVis = true
    },
    // 关闭定时导出
    handleCloseTiming() {
      this.timingVis = false
    },
    // 页码规格变化
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    // 页码变化
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.edc_export_wrapper {
  background-color: $white;
  height: 100%;

  .main_part {
    padding-top: 12px;
    background-color: $white;

    .header_text {
      .el-icon-data-line {
        margin-left: 12px;
        margin-right: 12px;
      }

      font-weight: bold;
      font-size: 20px;
    }

    .table_part {
      margin-top: 12px;
    }
  }
}
</style>
